<template>
  <div>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="ellipsis" size="20" />
      </template>
    </van-nav-bar>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="blue">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" width="100%" style="display: block" alt="" />
      </van-swipe-item>
    </van-swipe>
    <tips></tips>
    <div class="info">
      <h3>{{ info.name }}</h3>
      <p>{{ info.goods_brief }}</p>
      <div>{{ info.retail_price | moneyFilters }}</div>
    </div>
    <van-cell title="选择购买数量" is-link @click="show = true" />
    <div class="goodAttribute">
      <h4>产品参数</h4>
      <ul>
        <li v-for="(item, index) in attribute" :key="index">
          <span>{{ item.name }}</span>
          <section class="van-ellipsis">{{ item.value }}</section>
        </li>
      </ul>
    </div>
    <!-- 产品描述 数据返回的是html标签 将标签插入到盒子中 可以采用v-html 或者 ref -->
    <!-- <div class="box" v-html="info.goods_desc"></div> -->
    <div class="box" ref="box"></div>
    <!-- 常见问题 -->
    <center-tip title="常见问题"></center-tip>
    <ul class="issue">
      <li v-for="item in issue" :key="item.id">
        <h4>{{ item.question }}</h4>
        <p>{{ item.answer }}</p>
      </li>
    </ul>
    <center-tip title="大家都在看"></center-tip>
    <!-- 相关产品推荐 -->
    <product :goodsList="goodsList"></product>

    <div>
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
        ref="sku"
      />
    </div>
    <my-goods-action
      @addToCart="addToCart"
      :goodsCount="goodsCount"
    ></my-goods-action>
  </div>
</template>
 
<script>
import {
  getProductDetailData,
  getRelateProductData,
  getCartNum,
  addCart,
} from "@/request/api";
import tips from "@/components/common/Tips.vue";
import centerTip from "@/components/product/centerTip.vue";
import product from "@/components/product/product.vue";
import myGoodsAction from "@/components/product/myGoodsAction.vue";

export default {
  name: "",
  components: {
    tips,
    centerTip,
    product,
    myGoodsAction,
  },
  data() {
    return {
      //轮播图
      gallery: [],
      // 商品信息
      info: {},
      // 参数
      attribute: [],
      // 常见问题
      issue: [],
      //相关产品
      goodsList: [],
      //控制sku的显示
      show: false,
      sku: {
        tree: [],
        //是否隐藏库存
        hide_stock: false,
        //价格
        price: 0,
        //库存量
        stock_num: "",
      },
      goods: {
        picture: "",
      },
      // 购物车产品的数量
      goodsCount: "",
      //用于加入购物车请求的id
      productid: "",
    };
  },
  watch: {
    //监听路由变化，变化的时候请求数据在刷新页面
    $route(to, from) {
      // if (this.$route.query) {
      //   this.getDetail();
      //   this.$router.go(0);
      // }
      //监听路径变化后，刷新页面，重新请求跳转后的的内容 两种都能实现
      this.$router.go(0);
      this.getDetail();
    },
  },
  methods: {
    //获取产品详细
    getDetail() {
      getProductDetailData({
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res.data);
        if (res.errno == 0) {
          let { gallery, info, attribute, issue, productList } = res.data;
          this.gallery = gallery;
          this.info = info;
          this.attribute = attribute;
          this.issue = issue;
          //将图片渲染到box中（v-html）
          // console.log(this.$refs.box);
          this.$refs.box.innerHTML = info.goods_desc;
          //渲染sku的数据
          this.goods.picture = info.list_pic_url;
          this.sku.price = info.retail_price;
          this.sku.stock_num = info.goods_number;
          //用于加入购物车请求的id
          this.productid = productList[0].id;
        }
      });
    },
    //获取相关产品
    getRelateProduct() {
      getRelateProductData({
        id: this.$route.query.id,
      }).then((res) => {
        if (res.errno == 0) {
          // console.log(res.data);
          this.goodsList = res.data.goodsList;
        }
      });
    },
    //获取购物车产品的数量
    getcartnum() {
      getCartNum().then((res) => {
        if (res.errno == 0) {
          console.log(res);
          this.goodsCount = res.data.cartTotal.goodsCount;
        }
      });
    },
    //点击加入购物车显示sku
    addToCart() {
      if (this.show) {
        //如果sku已经显示了，则进行加入购物车的操作
        let num = this.$refs.sku.getSkuData().selectedNum;
        if (localStorage.token) {
          addCart({
            goodsId: this.$route.query.id,
            productId: this.productid,
            number: num,
          }).then((res) => {
            if (res.errno == 0) {
              // console.log(res.data);
              //让sku隐藏
              this.show = false;
              //更新购物车小红点的数量
              this.goodsCount = res.data.cartTotal.goodsCount;
              this.$toast.success("加入购物车成功");
              //跳转到购物车界面
              setTimeout(() => {
                this.$router.push("/cart");
              }, 1000);
            }
          });
        } else {
          this.$toast("请先登录");
          this.$router.push("/user");
        }
      } else {
        //没有则显示sku
        this.show = true;
      }
    },
    onClickLeft() {
      this.$router.back(-1);
    },
  },
  created() {
    // 获取产品详细
    this.getDetail();
    //获取相关产品
    this.getRelateProduct();
    //购物车产品的数量
    this.getcartnum();
  },
};
</script>
 
<style lang="less" scoped>
.info {
  background: #fff;
  text-align: center;
  h3 {
    font-weight: normal;
    padding-top: 0.3rem;
  }
  p {
    color: #999;
    font-size: 0.14rem;
    padding: 0.2rem 0;
  }
  div {
    color: red;
    font-size: 14px;
    padding-bottom: 0.3rem;
  }
}
.goodAttribute {
  margin-top: 15px;
  padding: 0.12rem 4%;
  background: #fff;
  h4 {
    font-weight: normal;
    font-size: 0.16rem;
  }
  ul {
    margin-top: 0.12rem;
    li {
      display: flex;
      justify-content: space-between;
      background: #efefef;
      height: 0.4rem;
      line-height: 0.4rem;
      border-radius: 0.07rem;
      margin-bottom: 10px;
      span {
        width: 25%;
        text-align: right;
        font-size: 0.14rem;
      }
      section {
        flex: 1;
        padding-left: 0.3rem;
      }
    }
  }
}
// less中 样式穿透
/deep/.box {
  img {
    width: 100%;
    display: block;
  }
}
.issue {
  background: #fff;
  padding: 1% 4%;
  li {
    h4 {
      font-weight: normal;
      font-size: 0.14rem;
      height: 0.3rem;
      line-height: 0.3rem;
      &::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        background: black;
        margin-right: 0.13rem;
        vertical-align: middle;
      }
    }
    p {
      color: #999;
      line-height: 0.16rem;
      font-size: 0.13rem;
      padding: 0.1rem 17px;
    }
  }
}
.van-sku-container {
  min-height: auto;
}
</style>